<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由的切换</title>
    <script src="../js/vue.js"></script>
    <!--    引入vue中路由插件-->
    <script src="../js/vue-router.js"></script>
</head>
<body>


<div id="app">

    <router-view></router-view>

    <!--    使用router-link标签实现路由的切换  a  -->
    <router-link to="/login">登录</router-link>
<!--    <myrouter-link to="/register?username=jack&password=123">注册</myrouter-link>-->
    <router-link to="/register/jack/123">注册</router-link>

    <br>
    <p>-------------------------------------------------------</p>

    <router-link :to="{path:'/login'}">登录</router-link>
    <router-link :to="{path:'/register',query:{username:'xiaoming',password:'888888'}}">注册</router-link>

    <br>
    <p>-------------------------------------------------------</p>

    <router-link :to="{name:'login'}">登录</router-link>
    <router-link :to="{name:'register',params:{username:'xiaoming',password:'888888'}}">注册</router-link>

    <br>
    <p>--------------------------js代码 实现路由的切换-----------------------------</p>
    <button @click="login">登录</button>
    <button @click="register">注册</button>


</div>


<script>
    // 非单文件组件的开发
    // 登录组件
    const login = {
        template: `
            <div>
                <h1>欢迎登录</h1>
                <form action="">
                        <p><input type="text" placeholder="请输入用户名"></p>
                        <p><input type="text" placeholder="请输入密码"></p>
                        <p><input type="submit" value="立即登录"></p>
                </form>
            </div>
        `
    }

    // 注册组件
    const register = {
        template: `
            <div>
                <h1>欢迎注册</h1>
                 <form action="">
                        <p><input type="text" placeholder="请输入用户名" v-model="username"></p>
                        <p><input type="text" placeholder="请输入密码"  v-model="password"></p>
                        <p><input type="submit" value="立即注册"></p>
                </form>
            </div>
        `,
        data(){
            return{
                username:'tom',
                password:'123456'
            }
        },
        created(){
            //接收参数
            console.log(this.$route)

            //  login?username=tom&password=123
            // console.log(this.$route.query)   // {username:jack,password:123456}
            // this.username = this.$route.query.username
            // this.password = this.$route.query.password


            //  login/tom/123
            this.username = this.$route.params.username
            this.password = this.$route.params.password

        }
    }

    // 1. 定义路由列表
    const routes = [

        {
            path: "/login",   // 页面的访问路径
            component: login,   // 路径对应的组件
            name: 'login'     //  路由的名称  后续使用该标识 代码的就是当前路由
        },
        {
            // path: "/register",
            path: "/register/:username/:password",
            component: register,
            name: 'register'
        }
    ]

    // 2.创建一个路由对象
    const myrouter = new VueRouter({
        routes
    })


    const vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            login(){
                console.log("登录")
                // 通过获取路由对象 实现路径的切换
                // this.$myrouter.push("/login")
                // this.$myrouter.push({name:'login'})
                this.$router.push({path:'/login'})
            },
            register(){
                console.log("注册")
                this.$router.push("/register")
            }
        },
        router
    })
</script>


</body>
</html>
